<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Sản Phẩm - Màu </h1>
                <p:messages id="messages" autoUpdate="true" closable="true" showDetail="true"/>
                <!-- Insert Form -->
                <h:form id="dataTableForm">
                    <p:panel header="Tìm kiếm" style="margin-bottom: 20px; width: 300px">
                        <h:panelGrid styleClass="my-panel-grid" columns="2">
                            <h:outputText value="Tên sản phẩm:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.phone.name}"/>

                            <p:commandButton id="searchButton" update=":dataTableForm:phoneDataTable" actionListener="#{phoneCodeController.search()}" icon="ui-icon" value="Tìm"/>
                        </h:panelGrid>
                    </p:panel>
                    
                    <!-- Data Table -->
                    <p:dataTable style="text-align: center" id="phoneDataTable" var="phoneCode" value="#{phoneCodeController.phoneCodeList}" paginator="true" rows="10" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom"
                                 emptyMessage="Không có sản phẩm">
                        
                        <p:column headerText="ID">
                            <p:outputLabel value="#{phoneCode.id}"/>
                        </p:column>
                        
                        <p:column headerText="Tên sản phẩm">
                            <p:outputLabel value="#{phoneCode.phone.name}"/>
                        </p:column>
                        
                        <p:column headerText="Màu">
                            <p:outputLabel value="#{phoneCode.color.name}"/>
                        </p:column>
                        
                        <p:column headerText="Giá">
                            <p:outputLabel value="#{phoneCode.price}">
                                <f:convertNumber type="number"/>
                            </p:outputLabel>
                        </p:column>
                        
                        <p:column headerText="Số lượng">
                            <p:outputLabel value="#{phoneCode.quantity}"/>
                        </p:column>
                        
                        <p:column headerText="Số ảnh">
                            <p:outputLabel value="#{phoneCode.numPhoto}"/>
                        </p:column>
                        
                        <!-- Actions -->
                        <p:column>
                            <p:commandButton id="btnUpdate" update=":updateForm" oncomplete="PF('updateDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                <f:setPropertyActionListener value="#{phoneCode}" target="#{phoneCodeController.selectedPhoneCode}"/>
                            </p:commandButton>
                            <p:commandButton id="btnDelete" update=":deleteProductForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                <f:setPropertyActionListener value="#{phoneCode}" target="#{phoneCodeController.selectedPhoneCode}"/>
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                    
                    <p:commandButton id="btnInsert" update=":insertForm" oncomplete="PF('insertDialog').show()" icon="icon-create" title="Thêm" value="Thêm"/>
                </h:form>
                
                <h:form id="insertForm">
                    <h:panelGrid columns="2" styleClass="my-panel-grid">
                        <p:dialog header="Thêm" widgetVar="insertDialog" resizable="false" showEffect="fade" hideEffect="fade" modal="true">
                            <h:panelGrid columns="2" styleClass="my-panel-grid">

                                <h:outputLabel value="Tên sản phẩm:"/>
                                <p:selectOneMenu value="#{phoneCodeController.selectedPhoneCode.phone.id}">
                                    <f:selectItem itemValue="#{null}" itemLabel="Chọn sản phẩm"/>
                                    <f:selectItems value="#{phoneCodeController.phoneList}" var="phoneList" 
                                                   itemValue="#{phoneList.id}" itemLabel="#{phoneList.name}"/>
                                    <p:ajax update="color"/>
                                </p:selectOneMenu>

                                <h:outputLabel value="Màu:"/>
                                <p:selectOneMenu id="color" value="#{phoneCodeController.selectedPhoneCode.color.id}">
                                    <f:selectItem itemValue="#{null}" itemLabel="Chọn màu"/>
                                    <f:selectItems value="#{phoneCodeController.colorList}" var="colorList" 
                                                   itemValue="#{colorList.id}" itemLabel="#{colorList.name}"/>
                                </p:selectOneMenu>

                                <h:outputLabel value="Giá:"/>
                                <p:spinner value="#{phoneCodeController.selectedPhoneCode.price}" required="true" stepFactor="50000" min="50000"/>

                                <!-- Actions -->
                                <f:facet name="footer">
                                    <p:commandButton actionListener="#{phoneCodeController.insert()}" update=":dataTableForm:phoneDataTable, :messages" oncomplete="insertDialog.hide();" icon="ui-icon" title="Thêm" value="Thêm"/>
                                    <p:commandButton oncomplete="insertDialog.hide();" icon="icon-create" title="Hủy bỏ" value="Hủy bỏ"/>
                                </f:facet>
                            </h:panelGrid>
                        </p:dialog>
                    </h:panelGrid>
                </h:form>
                
                <h:form id="updateForm">
                    <p:dialog header="Sửa" widgetVar="updateDialog" resizable="false" showEffect="fade" hideEffect="fade" modal="true">
                        <h:panelGrid columns="2" styleClass="my-panel-grid">
                            <h:outputLabel value="ID:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.id}" disabled="true"/>
                            
                            <h:outputLabel value="Tên sản phẩm:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.phone.name}" disabled="true"/>
                            
                            <h:outputLabel value="Màu:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.color.name}" disabled="true"/>

                            <h:outputLabel value="Giá:"/>
                            <p:spinner value="#{phoneCodeController.selectedPhoneCode.price}" required="true" stepFactor="50000" min="50000"/>
                            
                            <h:outputLabel value="Số lượng:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.quantity}" disabled="true"/>
                            
                            <h:outputLabel value="Số ảnh:"/>
                            <p:inputText value="#{phoneCodeController.selectedPhoneCode.numPhoto}" disabled="true"/>

                            <!-- Actions -->
                            <f:facet name="footer">
                                <p:commandButton actionListener="#{phoneCodeController.update()}" update=":dataTableForm:phoneDataTable, :messages" oncomplete="updateDialog.hide();" icon="ui-icon" title="Cập nhật" value="Cập nhật"/>
                                <p:commandButton oncomplete="updateDialog.hide();" icon="icon-create" title="Hủy bỏ" value="Hủy bỏ"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>
                </h:form>
                
                <!-- Delete product form -->
                <h:form id="deleteProductForm">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="fade" severity="alert" widgetVar="confirmation"
                                     message="Xóa sản phẩm - màu?" header="Xóa sản phẩm - màu" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Đồng ý" action="#{phoneCodeController.delete()}" oncomplete="confirmation.hide();" update=":dataTableForm:phoneDataTable, :messages" />
                            <p:commandButton value="Hủy bỏ" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>